<template>
  <div class="search-container">
    <!-- 顶部搜索按钮 -->
    <!-- 在<van-search>外层 嵌套<form action="/">,即可在手机键盘显示搜索按钮 -->
    <form action="/" class="search-form">
      <van-search
        v-model="searchInput"
        background="rgb(50, 150, 250)"
        placeholder="请输入搜索关键词"
        show-action
        @cancel="$router.back()"
        @search="updateSearchFn"
        @focus="isResultShow=false"
      />
    </form>

    <!-- 搜索列表 -->

    <!-- 搜索结果 首先通过开关状态来判断是否显示搜索结果 -->
    <SearchResult
      v-if="isResultShow"
      :searchInput="searchInput"
    />

    <!-- 联想建议 当搜索结果为展开时,再判断搜索框中是否有值, 有内容就显示 -->
    <SearchSuggestion
      v-else-if="searchInput"
      :searchInput="searchInput"
      @updateSearch="updateSearchFn"
    />

    <!-- 搜索历史 其余情况展示 -->
    <SearchHistory v-else :searchHistories="searchHistories" @updateSearch="updateSearchFn" @clearAll="searchHistories=[]"></SearchHistory>

  </div>
</template>

<script>
/*
  目标1: 配置搜索路由页面, 新建3个子组件(搜索历史, 联想建议, 搜索结果)
  目标2: 在home.vue的顶部导航中使用vant自带的to属性来实现声明式跳转
  目标3: 查阅文档, 设置搜索页面顶部查询框, 并将3个业务组件渲染到页面上
*/

/*
  目标4: 3个组件的切换逻辑
  1.1 如果结果列表数组中有值时, 显示<搜索结果>, 发现有时候通过关键字搜索出来的结果为[],但是也需要展示<搜索结果>, 将显示查询结果的组件通过一个开关变量来控制是否显示
  1.2 如果输入框中有值时, 显示的是<联想建议>
  1.3 其余情况显示<搜索历史>
  1.4 当输入框再次聚焦时, 会关闭变量开关
*/

/*
  目标5：历史记录的添加和展示
  1. 当搜索框的内容触发查询结果时，会将该内容添加到查询历史数组中
  2. 如果原来的查询历史数组中有这个值， 那么将该元素的位置放到数组的最前面（索引为1的位置）
*/

/*
  目标6：历史记录的切换和删除
  1. 创建一个状态变量,来控制删除状态和非删除状态的切换
  2. 给垃圾桶和完成按钮绑定切换状态变量的点击事件
  3. 当页面处于非删除状态时,点击单元格直接调用updateSearch方法
  4. 当处于删除状态时, 点击单元格删除历史记录数组中当前元素
  5. 当点击全部删除的按钮时, 需要将历史记录数组全部清空
*/

/*
  目标7: 搜索历史的持久化
  1. 在数据获取时data(){return 定义的变量} 通过getItem尝试去本地存储中获取数据
  2. 通过watch监听器监听当前持久化数据的变化, 如果发生改变通过setItem来进行本地存储
*/
import SearchHistory from './components/searchHistory.vue'
import SearchResult from './components/searchResult.vue'
import SearchSuggestion from './components/searchSuggestion.vue'
import { setItem, getItem } from '../../utils/storage.js'
export default {
  name: 'searchIndex',
  components: {
    SearchHistory,
    SearchResult,
    SearchSuggestion
  },
  data () {
    return {
      searchInput: '', // 输入框的值
      isResultShow: false, // 查询结果的组件通过一个开关变量来控制是
      searchHistories: getItem('TOUTIAO_SEARCH_HISTORIES') || []// 搜索历史记录列表
    }
  },
  watch: {
    searchHistories: {
      deep: true,
      handler () {
        setItem('TOUTIAO_SEARCH_HISTORIES', this.searchHistories)
      }
    }
  },
  methods: {
    // 点击联想或者点击搜索框的搜索按钮, 搜索结果
    updateSearchFn (value) {
      this.searchInput = value
      this.isResultShow = true

      // 将搜索结果添加到历史数组中
      // 如果原来的查询历史数组中有这个值，那么将该元素的位置放到数组的最前面
      const index = this.searchHistories.indexOf(value)
      if (index !== -1) {
        // 此时说明有这个值，应该去除当前值，再放到最前面去
        this.searchHistories.splice(index, 1)
      }
      this.searchHistories.unshift(value)
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  padding-top: 108px;
  .search-form {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
  }
  .van-search__action {
    color: #fff;
  }
}
</style>
